<template>
  <div>
    <el-table ref="multipleTable" size="small"
              :data="tableData"
              stripe
              :row-key="id"
              @expand-change="ExpandChange">
      <template v-if="columns.length===0">
        <el-table-column width="150" >
          <template slot-scope="scope">
            <span v-for="space in scope.row._level" :key="space" class="ms-tree-space"></span>
            <span v-if="iconShow(0,scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
            <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
            <i v-else class="el-icon-minus"></i>
          </span>
            {{ scope.$index }}
          </template>
        </el-table-column>
      </template>
      <template v-else>
        <el-table-column v-if="pagination" label="序号"  type="index" :index="indexMethod"></el-table-column>
        <el-table-column
          v-for="(column, index) in columns"
          :key="index"
          :label="column.text"
          :width="column.width"
          :align="column.align"
          :show-overflow-tooltip="column.showOverflowTooltip">
          <template slot-scope="scope">
            <template v-for="space in scope.row._level">
              <span v-if="index === 0" :key="space" class="ms-tree-space"></span>
            </template>
            <div v-if="column.text == '序号'" class="td">
              <span>{{scope.$index + 1}}</span>
            </div>
            <div v-else-if="column.text == '是否启用' && column.is_use" class="td">
              <el-button v-if="scope.row.is_use == 1" type="primary" size="mini" @click="setUse(scope.row)">{{scope.row[column.value]}}</el-button>
              <el-button v-else size="mini" @click="setUse(scope.row)">{{scope.row[column.value]}}</el-button>
            </div>
            <div v-else class="td">{{scope.row[column.value]}}</div>

            <div class="td" v-if="column.button">
              <el-button v-for="btn in column.button" :type="btn.type"
                         :key='btn.name'
                         @click="isClick(scope.row,btn.event,btn.n)"
                         size="mini" >{{btn.name}}</el-button>
            </div>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div v-if="pagination">
      <el-pagination background
                     layout="total,sizes,prev,pager, next"
                     @current-change="currentChange"
                     @size-change="sizeChange"
                     :page-sizes="pagination.pageSizes"
                     :page-size.sync="pagination.pageSize"
                     :total="pagination.total"
                     :current-page.sync="pagination.currentPage"
                     class="paging fr">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    // name: "TreeTabletest",
    data() {
      return {
        id:'id',
        openRow:[],
      };
    },
    inject: ["reload"],
    props: {
      /* eslint-disable */
      //表格数据
      tableData: {
        type: [Array, Object],
        required: true
      },
      //表头菜单
      columns: {
        type: Array,
        default: () => []
      },
      pagination:{
        type: [Array, Object],
      },
      setUseEvent:{
        default:''
      },
      expandChange:{
        default:''
      },
      currentChangeEvent:{
        default:''
      },
      sizeChangeEvent:{
        default:''
      },
      expandRowKeys:{
        type: Array,
        default: () => []
      },
      openRowName:{
        default:''
      }
    },
    computed: {},
    mounted() {

    },
    watch:{
      tableData(){
        //当刷新数据后并且全部加载完后，获取openRow参数进行展开行
        this.$nextTick(()=>{
          if(sessionStorage[this.openRowName]){
            let expandRowKeys = JSON.parse(sessionStorage[this.openRowName])
            this.openRow = expandRowKeys;
            expandRowKeys.forEach(x=>{
              this.$refs.multipleTable.toggleRowExpansion(x)
            })
          }
        })
      }
    },
    methods: {
      indexMethod(index){
        return index + ((this.pagination.currentPage - 1) * this.pagination.pageSize) + 1
      },
      //操作点击事件
      isClick(row,event,n){
        this.$emit(event,row,n)
      },
      //是否启用点击事件
      setUse(row){
        this.$emit(this.setUseEvent,row);
      },
      currentChange(val){
        this.$emit(this.currentChangeEvent,val);
      },
      sizeChange(val){
        this.$emit(this.sizeChangeEvent,val);
      },
      //展开或关闭行时触发的事件
      ExpandChange(row,expandedRows){
        //判断开启时，且openRow中没有对应id的项目时，再push
        if(expandedRows){
          if(!(this.openRow.find(x => {return x.id === row.id}))){
            this.openRow.push(row)
          }
        }else{
          //判断关闭时在openRow中找到对应id的项目删除
          for(let i in this.openRow){
            if(this.openRow[i].id == row.id){
              this.openRow.splice(i,1)
            }
          }
        }
        sessionStorage.setItem(this.openRowName,JSON.stringify(this.openRow))
      },
      //设置表头全选
      renderHeader(h, data) {
        return h("span", [
          h("span", {
            attrs: {
              id: "chooseall",
              style:
                "box-sizing: border-box;width: 14px;height: 14px;background-color: #fff;"
            }
          })
        ]);
      },
    },

  };
</script>
<style rel="stylesheet/css">
  .ms-tree-space {
    position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: 18px;
    height: 14px;
  }
  .ms-tree-space::before {
    content: "";
  }
  table td {
    line-height: 26px;
  }
  .tree-ctrl {
    position: relative;
    cursor: pointer;
    color: #2196f3;
    margin-left: -18px;
  }
  .td{
    display: inline-block;
  }
  .paging {
    margin: 15px;
    height: 28px;
  }
</style>
